<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分组管理</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/frame.css">
    <style>
        .deleteGroup {
            background-color: #FF5722;
            color: #ffffff;
        }

        .addMember {
            background-color: #F7B824;
            color: #ffffff;
        }

        .newGroup {
            margin: 0 0 1rem 0;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            height: 3rem;
            /*width: 6rem;*/
            line-height: 3rem;
            font-size: 1rem;
            text-align: center;
            background-color: #eeeeee;
            /*color: #ffffff;*/
            border-radius: .2rem;
        }

        .newGroup:hover {
            opacity: .8;
        }

        .member {
            cursor: default;
        }

        .deleteMember {
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            background-color: #FF5722;
            color: #ffffff;
            font-size: .8rem;
            border-radius: 50%;
            position: absolute;
            top: -.3rem;
            right: -.3rem;
            z-index: 999;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            opacity: .9;
        }

        .deleteMember:hover {
            opacity: .6;
        }

    </style>
</head>
<body class="ub ub-ver">
<div id="frameContent" class="ub-f conScrollY">

    <div class="group">
        <div class="ub ub-ac">
            <div class="">分组一</div>
            <div class="isShow">☝</div>
            <div class="ub-f ub ub-pe">
                <div class="topBtn addMember">添加成员</div>
                <div class="topBtn deleteGroup">删除分组</div>
            </div>
        </div>
        <div class="members">
            <div class="member">张三
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李四
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王锤
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王翠
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李毛
                <div class="deleteMember">X</div>
            </div>
            <div class="member">赵六
                <div class="deleteMember">X</div>
            </div>
            <div class="member">张三
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李四
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王锤
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王翠
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李四
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王大锤
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王翠
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李毛
                <div class="deleteMember">X</div>
            </div>
            <div class="member">赵六
                <div class="deleteMember">X</div>
            </div>
            <div class="member">张三
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李四
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王锤
                <div class="deleteMember">X</div>
            </div>
            <div class="member">欧阳狗蛋
                <div class="deleteMember">X</div>
            </div>
        </div>
    </div>
    <div class="group">
        <div class="ub ub-ac">
            <div class="">分组二</div>
            <div class="isShow">☝</div>
            <div class="ub-f ub ub-pe">
                <div class="topBtn addMember">添加成员</div>
                <div class="topBtn deleteGroup">删除分组</div>
            </div>
        </div>
        <div class="members">
            <div class="member">王锤
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王翠
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李毛
                <div class="deleteMember">X</div>
            </div>
            <div class="member">赵六
                <div class="deleteMember">X</div>
            </div>
            <div class="member">张三
                <div class="deleteMember">X</div>
            </div>
            <div class="member">李四
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王锤
                <div class="deleteMember">X</div>
            </div>
            <div class="member">王翠
                <div class="deleteMember">X</div>
            </div>
        </div>
    </div>


    <div class="newGroup">+ 新建分组</div>
</div>
<!--<div id="btnFoot" class="ub ub-ac ub-pe">-->
<!--<div class="btn cancel">取消</div>-->
<!--<div class="btn ok">确定</div>-->
<!--</div>-->

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script>
    var layerIndex = parent.layer.getFrameIndex(window.name);

    $(document).on('click', '.newGroup', function (e) {
        //新建组
        layer.open({
            type: 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['新建分组', 'background:#414A53;color:#FFFFFF'],//控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            //offset: ['', ''],//[纵坐标, 横坐标]，默认为垂直水平居中
            area: ['60%', '95%'],//[宽度, 高度]
            //maxmin: true,//是否输出窗口最小化/全屏/还原按钮,默认false
            shade: [0.3, '#000'],//控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true,//遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false,//动画类型0~6 默认0 设置false为不使用动画
            scrollbar: false,//屏蔽浏览器滚动条
            content: 'frameGroupNew.html'
        });
    });

    var $addMemberNode = null;//定义添加成员的节点
    $(document).on('click', '.addMember', function (e) {
        $addMemberNode = $(this);//记录添加成员的dom节点
        //添加成员
        layer.open({
            type: 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['添加成员', 'background:#414A53;color:#FFFFFF'],//控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            //offset: ['', ''],//[纵坐标, 横坐标]，默认为垂直水平居中
            area: ['60%', '95%'],//[宽度, 高度]
            //maxmin: true,//是否输出窗口最小化/全屏/还原按钮,默认false
            shade: [0.3, '#000'],//控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true,//遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false,//动画类型0~6 默认0 设置false为不使用动画
            scrollbar: false,//屏蔽浏览器滚动条
            content: 'frameGroupMemberAdd.html'
        });
    });

    $(document).on('click', '.isShow', function (e) {
        //展开/隐藏成员
        var $e = $(this);
        var $members = $e.parents('.group').find('.members');
        if ($e.hasClass('hide')) {
            $e.removeClass('hide');
            $members.slideDown();
        } else {
            $e.addClass('hide');
            $members.slideUp();

        }
    });

    $(document).on('click', '.deleteGroup', function (e) {
        var $group = $(this).parents('.group');
        layer.msg('确认删除当前分组吗？', {
            time: 20000, //20s后自动关闭
            btn: ['确认', '取消'],
            yes: function (index, layero) {
                //删除组
                $group.fadeOut(function () {
                    $group.remove();
                });

                layer.close(index);
            }
        });
    });

    $(document).on('click', '.deleteMember', function (e) {
        var $member = $(this).parents('.member');
        layer.msg('确认从当前分组删除该联系人吗？', {
            time: 20000, //20s后自动关闭
            btn: ['确认', '取消'],
            yes: function (index, layero) {
                //删除成员
                $member.fadeOut(function () {
                    $member.remove();
                });

                layer.close(index);
            }
        });
    });

    //    $('.btn').on('click', function (e) {
    //        //取消、确定
    //        var $e = $(this);
    //        if ($e.hasClass('cancel')) {
    //            //取消
    //            parent.layer.close(layerIndex);
    //        }
    //        if ($e.hasClass('ok')) {
    //            //确定
    //            parent.layer.close(layerIndex);
    //        }
    //    });

    function addGroup(group) {
        //向页面添加新建的组
        var groupName = group.name;
        var members = group.members;
        var membersHtml = addMembers(members);
        var groupHtml = '<div class="group">' +
                '<div class="ub ub-ac">' +
                '<div class="">' + groupName + '</div>' +
                '<div class="isShow">☝</div>' +
                '<div class="ub-f ub ub-pe">' +
                '<div class="topBtn addMember">添加成员</div>' +
                '<div class="topBtn deleteGroup">删除分组</div>' +
                '</div>' +
                '</div>' +
                '<div class="members">' + membersHtml + '</div>';
        $('.newGroup').before(groupHtml);
    }

    function addMembers(members, isAdd) {
        //向页面添加新建的组
        var members = members;
        var membersHtml = '';
        $.each(members, function (index, item) {
            membersHtml += '<div class="member">' + item + '<div class="deleteMember">X</div></div>';
        });
        if (!isAdd) {
            //仅返回成员html结构
            return membersHtml;
        } else {
            //向页面节点添加成员
            $addMemberNode.parents('.group').find('.members').prepend(membersHtml);
        }
    }

</script>
</body>
</html>